<template>
    <div class="main">
        <div style="margin: 20px; display: flex; align-items: center">
            <el-page-header @back="goBack">
                <template #content>
                    <span style="font-weight: bold">
                        {{ route.query.title }} 详情页
                    </span>
                </template>
            </el-page-header>

            <el-Button type="primary" @click="Print">打印</el-Button>
        </div>

        <el-space wrap :size="20" style="margin-left: 20px">
            <CPU :data="cpu_data" />
            <GPU :data="gpu_data" />
            <Center :data="mainboard_data" />
            <Memory :data="memory_data" />
            <Ssd :data="ssd_data" />
            <Hhd :data="hdd_data" />
        </el-space>

        <!-- <Commit style="height: 500px" type="ASS" :id="route.query.id" /> -->

        <el-drawer v-model="drawer" title="配置导出" :with-header="false" size="40%">
            <div ref="pdf" style="padding: 10px;">
                <el-descriptions direction="vertical" style="width: 500px" :column="2" size="large" border>
                    <el-descriptions-item :span="2" label="配置名">
                        <span style="font-weight: 900; font-size: 20px;">{{ route.query.title }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="CPU">
                        <div class="box">
                            <span class="ass">{{ cpu_data.manufacturers }}-{{ cpu_data.series }}-{{
                cpu_data.code_name
            }}</span>
                            <div>
                                <span class="score">{{ cpu_data.score }}</span>
                                <span class="price">￥ {{ cpu_data.price }}</span>
                            </div>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="GPU">
                        <div class="box">
                            <span class="ass">{{ gpu_data.codeName }}</span>
                            <div>
                                <span class="score">{{ gpu_data.score }}</span>
                                <span class="price">￥ {{ gpu_data.price }}</span>
                            </div>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="主板">
                        <div class="box">
                            <span class="ass">{{ mainboard_data.series }}</span>
                            <div>
                                <span class="score">{{ mainboard_data.score }}</span>
                                <span class="price">￥ {{ mainboard_data.price }}</span>
                            </div>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="内存">
                        <div class="box">
                            <span class="ass">{{ memory_data.manufacturers }}</span>
                            <div>
                                <span class="score">{{ memory_data.score }}</span>
                                <span class="price">￥ {{ memory_data.price }}</span>
                            </div>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="硬盘">
                        <div class="box">
                            <span class="ass"> {{ hdd_data.manufacturers }}</span>
                            <div>
                                <span class="score">{{ hdd_data.score }}</span>
                                <span class="price">￥ {{ hdd_data.price }}</span>
                            </div>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="固态硬盘">
                        <div class="box">
                            <span class="ass"> {{ ssd_data.manufacturers }}</span>
                            <div>
                                <span class="score">{{ ssd_data.score }}</span>
                                <span class="price">￥ {{ ssd_data.price }}</span>
                            </div>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="评分">
                        <span class="score">{{ score }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="价格">
                        <span class="price">￥ {{ price }}</span>
                    </el-descriptions-item>
                </el-descriptions>
            </div>

            <el-space style="margin-top: 20px;">
                <el-button @click="PrintPDF">导出PDF</el-button>
                <el-button @click="PrintIMG">导出图片</el-button>
            </el-space>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import { generateAndDownloadPDF } from "@/utils/pdf.ts"; //工具方法，导出操作
import { generateAndDownloadImage } from "@/utils/image.ts"; //工具方法，导出操作
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getConfig } from "@/server/home/http";
import CPU from "../Info/components/content/CPU.vue";
import GPU from "../Info/components/content/GPU.vue";
import Center from "../Info/components/content/Center.vue";
import Memory from "../Info/components/content/Memory.vue";
import Ssd from "../Info/components/content/Ssd.vue";
import Hhd from "../Info/components/content/Hhd.vue";
// import Commit from "../Info/components/Commit.vue";
import {
    getCPUDataById,
    getGPUDataById,
    getMainboardDataById,
    getMemoryDataById,
    getSSDDataById,
    getHDDDataById,
} from "@/server/assembly/index.ts";
const drawer = ref(false);
const pdf = ref(null);

let price = ref(0);
let score = ref(0);


const route = useRoute();
const router = useRouter();
const cpu_data = ref({});
const gpu_data = ref({});
const mainboard_data = ref({});
const memory_data = ref({});
const ssd_data = ref({});
const hdd_data = ref({});

onMounted(() => {
    // console.log(route);
    const data = {
        id: route.query.id as string,
    };
    getConfig(data)
        .then((res) => {
            if (res.code === 200) {
                // console.log(res.data[0].ass_id);

                getInfo(res.data.result[0].ass_id);
            }
        })
        .catch((err) => {
            console.log(err);
        });
});

const getInfo = async (data) => {
    try {
        // 并行执行所有请求
        const [cpuData, gpuData, mainboardData, memoryData, ssdData, hddData] =
            await Promise.all([
                getCPUDataById(data.cpu_id),
                getGPUDataById(data.gpu_id),
                getMainboardDataById(data.mainboard_id),
                getMemoryDataById(data.memory_id),
                getSSDDataById(data.ssd_id),
                getHDDDataById(data.hdd_id),
            ]);

        // 在这里处理所有数据
        // console.log(cpuData, gpuData, mainboardData, memoryData, ssdData, hddData);
        cpu_data.value = cpuData.data;
        gpu_data.value = gpuData.data;
        mainboard_data.value = mainboardData.data;
        memory_data.value = memoryData.data;
        ssd_data.value = ssdData.data;
        hdd_data.value = hddData.data;

        price.value = cpuData.data.price + gpuData.data.price + mainboardData.data.price + memoryData.data.price + ssdData.data.price + hddData.data.price
        score.value = parseFloat(cpuData.data.score + gpuData.data.score + mainboardData.data.score + memoryData.data.score + ssdData.data.score + hddData.data.score).toFixed(1);
    } catch (error) {
        console.log(error);
        // 可选择终止后续操作或其他处理
    }
};

const Print = () => {
    drawer.value = true;

    // downloadPDF(pdf.value)
};

const PrintPDF = () => {
    generateAndDownloadPDF(pdf.value as HTMLElement)
    drawer.value = false;
};

const PrintIMG = () => {
    generateAndDownloadImage(pdf.value as HTMLElement);
    drawer.value = false;
};

const goBack = () => {
    router.back(1);
};
</script>

<style scoped lang="scss">
.box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ass {
        font-weight: bold;
    }
}

.price {
    color: #f56c6c;
    font-size: 16px;
    font-weight: bold;
}

.score {
    margin-right: 20px;
    color: #67c23a;
    font-size: 16px;
    font-weight: bold;
}

.main {
    width: 100%;
}
</style>
@/utils/pdf